<template>
	<view class="content">
		<!-- three -->
		<view id="threeView"></view>
		<!-- #ifdef APP-PLUS || H5 -->
		<view id="three" class="three" @click="three.onClick"></view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>非 APP、H5 环境不支持</view>
		<!-- #endif -->
	</view>
</template>

<script>
export default {
	data() {
		return {
		};
	},
	onLoad() {
	
	},
	methods: {
	
	}
};
</script>

<script module="three" lang="renderjs">
const THREE = require('@/common/three/build/three.module.js')
import { OrbitControls } from '@/common/three/examples/jsm/controls/OrbitControls.js'
import {GLTFLoader} from '@/common/three/examples/jsm/loaders/GLTFLoader.js'
var renderer;
var scene,GLTFloader;
var camera;
var controls;
let pmremGenerator,envMap;
let renderEnabled = false;
let timeOut = null;
export default {
	mounted() {
		this.initThree();
	},
	methods: {
		
		initThree() {
			let that = this
			// 如果返回的不是未定义，说明threejs成功引入
			console.log('打印场景API', THREE.Scene);
			/* 创建场景对象Scene */
			scene = new THREE.Scene();
			/*
			    相机设置
			 */
			var width = window.innerWidth; // 窗口宽度
			var height = window.innerHeight; // 高度
			/*
				正投影相机OrthographicCamera: 影到的物体大小是不受距离影响的。
				透视投影相机PerspectiveCamera: 投影到的物体的大小是随着距离逐渐变小
			*/
			camera = new THREE.PerspectiveCamera( 20, width / height, 0.1, 10000 );
			camera.position.set( 0, 30, 100 );
			scene.add( camera );
			/*
			    创建渲染器对象
			 */
			const element = document.getElementById('threeView')
			renderer = new THREE.WebGLRenderer( { antialias: true,alpha: true } );
			renderer.physicallyCorrectLights = true;
			renderer.outputEncoding = THREE.sRGBEncoding;
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			pmremGenerator = new THREE.PMREMGenerator( renderer );
			pmremGenerator.compileEquirectangularShader();
			renderer.domElement.style.height = '80vh'
			renderer.domElement.style.pointerEvents = 'none'
			console.log(renderer.domElement)
			element.appendChild(renderer.domElement); // body元素中插入canvas对象
			/*
			    光源设置
			 */
			// 半球光
			const hemiLight = new THREE.HemisphereLight();
			hemiLight.intensity = 0.3
			scene.add( hemiLight );
			// 环境光
			const ambientLight = new THREE.AmbientLight( 0xffffff, 1);
			scene.add( ambientLight );
			//平行光
			const light = new THREE.DirectionalLight( 0xffffff, 0.3);
			light.position.set( -10, -1, 100 );
			scene.add( light );
			/*
			    控制器
			 */
			controls = new OrbitControls( camera, renderer.domElement );
			controls.enablePan = false;//滑动
			controls.enableDamping = true;
			controls.dampingFactor = 0.05;
			controls.screenSpacePanning = false;
			// controls.minDistance = 60;
			// controls.maxDistance = 100;
			controls.maxPolarAngle = Math.PI /2;//2.8 1.8 Math.PI / 1
			// controls.minPolarAngle = Math.PI /2;//相同的角度禁止垂直旋转
			controls.addEventListener('change', function(){
			    // 执行渲染操作，指定场景，相机作为参数
			    renderer.render(scene, camera);
			});
			
			var loader = new GLTFLoader();
			let model = null;
			loader.load('http://localhost/model/fan.glb', function(
				gltf) {
				model = gltf.scene;
				scene.add(model);
				model.traverse((obj) => {
					if (obj.isMesh) {
						console.log("默认材质：",obj.name)
					}
				})
			}, undefined, function(e) {
				console.error("网络错误：", e);
			});
			
			
			// var geometry = new THREE.BoxGeometry(2, 2, 2);
			// var material = new THREE.MeshBasicMaterial({
			// 	color: 0xed3ed3
			// });
			// //组合成一个粉色的立方体
			// var cube = new THREE.Mesh(geometry, material);
			// //添加进场景
			// scene.add(cube);
			
			
			function animatea() {
				requestAnimationFrame( animatea );
				controls && controls.update();
				renderer.render( scene, camera );
			};
			animatea();
		},
	}
}
</script>

<style>

.content {
	margin: 0;
	overflow: hidden;
}

.three {
	width: 100%;
}
#threeView{
	width: 100%;
	height: 40vh;
}

</style>
